<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item, index) in bannerList">
				<div class="swiper-item">
					<div class="pic">
						<!-- <span>{{ item }}</span> -->
						<img :src="item.src" />
					</div>
				</div>
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</template>

<script>
import Swiper from '@mall/assets/plugins/swiper5.3.0/swiper.min.js';
import '@mall/assets/plugins/swiper5.3.0/swiper.min.css';

export default {
	data() {
		return {
			bannerList: [
				{
					src: require('../../../assets/img/mall-001.jpg'),
					key: '01'
				},
				{
					src: require('../../../assets/img/mall-002.jpg'),
					key: '02'
				},
				{
					src: require('../../../assets/img/mall-003.jpg'),
					key: '03'
				},
				{
					src: require('../../../assets/img/mall-004.jpg'),
					key: '04'
				},
				{
					src: require('../../../assets/img/mall-005.jpg'),
					key: '05'
				},
				{
					src: require('../../../assets/img/mall-006.jpg'),
					key: '06'
				}
			]
		};
	},
	computed: {},
	components: {},
	watch: {},
	created() {
		this.init();
	},
	mounted() {},
	methods: {
		init() {
			let pEl = '';
			let isLoop = false;
			let isAutoplay = false;
			if (this.bannerList.length > 1) {
				isLoop = true;
				isAutoplay = {
					delay: 3000, //轮播时间间隔(毫秒)
					disableOnInteraction: false
				};
				pEl = '.swiper-pagination';
			}

			let mySwiper = new Swiper('.swiper-container', {
				loop: isLoop, //是否可以滑动
				autoplay: isAutoplay, //是否自动轮播
				pagination: {
					el: pEl, //分页器设置
					clickable: true
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@mall/assets/css/common';

.swiper-container {
	.swiper-item {
		width: 100%;
		height: 100%;

		.pic {
			width: 100%;
			max-height: rem(320);
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			overflow: hidden;
			img {
				width: 100%;
				transform: translate3d(0, 0, 0); //解决IOS闪屏问题
			}
		}
	}

	.swiper-pagination {
		span {
			width: rem(20);
			height: rem(20);
			margin: 0 rem(10) !important;
		}

		.swiper-pagination-bullet-active {
			background: #008acb;
		}
	}
}
</style>
